<script setup  name="ScoreOverview">
import { ref, onMounted } from 'vue';
import { RouterView, useRouter } from 'vue-router';
import { useSuperAdmOverviewTableLoading } from '@/stores/superAdministrator';

const superAdmOverviewTableLoading = useSuperAdmOverviewTableLoading(); // 获取表格加载状态
const router = useRouter(); // 路由实例，用于路由跳转
const routerQuery = router.currentRoute.value.query;
const line = ref(null);// 线条元素

// 进行中和已结束点击事件，处理线条的移动，路由跳转，表格加载状态
const headerClick = ((index) => {
    if (index === "进行中" ) {
        line.value.classList.remove('lineActive');
        superAdmOverviewTableLoading.setOverviewTableLoading(true); 
        setTimeout(() => {
            superAdmOverviewTableLoading.setOverviewTableLoading(false); 
            router.push('/superAdministrator/scoreOverview'); 
        }, 500);
    }
    if (index === "已结束" ) {
        line.value.classList.add('lineActive');
        superAdmOverviewTableLoading.setOverviewTableLoading(true);
        setTimeout(() => {
            superAdmOverviewTableLoading.setOverviewTableLoading(false);
            router.push('/superAdministrator/scoreOverview/finish');
        }, 500);
    }
})
onMounted(() => {
    headerClick(routerQuery.state);
})
</script>

<template>
    <div class="scoreOverview">
        <!-- 头部菜单 -->
        <div class="header">
            <div class="layout" @click="headerClick('进行中')">
                <div class="text active">进行中</div>
            </div>
            <div class="layout" @click="headerClick('已结束')">
                <div class="text">已结束</div>
            </div>
            <div class="line" ref="line"></div>
        </div>            
        <!-- 数据表格 -->
        <RouterView v-loading="superAdmOverviewTableLoading.overviewTableLoading" element-loading-text="数据加载中..."></RouterView>
    </div>
</template>

<style scoped lang="scss">
.scoreOverview {
    width: 100%;
    height: 100%;
    .header {
        position: relative;
        width: 100%;
        height: 60px;
        background-color: white;
        border-top: 1px solid rgb(197, 197, 197);
        border-bottom: 1px solid rgb(197, 197, 197);
        display: flex;
        font-size: 17px;
        font-weight: 500;
        .layout {
            height: 100%;
            padding-left: 4vw;
            .text {
                width: 5vw;
                height: 100%;
                line-height: 60px;
                text-align: center;
                white-space: nowrap;
                &:hover{
                    color:#4c5fbc;
                }
            }
        }
        .line {
            width: 6vw;
            height: 3px;
            background-color: #4c5fbc;
            position: absolute;
            bottom: -2px;
            transition: transform 0.3s ease-in-out;
            border-radius: 10px;
            transform: translateX(3.5vw);
        }
        .lineActive {
            transform: translateX(12.5vw);
        }
    }
}

</style>